<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap模板</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <form>
            <div class="input-group mb-3">
                <span class="input-group-text">@</span>
                <input type="text" class="form-control" placeholder="Username">
            </div>

            <div class="input-group">
                <input type="text" class="form-control" placeholder="Your Email">
                <span class="input-group-text">@runoob.com</span>
            </div>
        </form>
    </div>
    <br>
    <div class="container">
        <div class="input-group mb-3 input-group-sm">
            <span class="input-group-text">Small</span>
            <input type="text" class="form-control">
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text">Default</span>
            <input type="text" class="form-control">>
        </div>

        <div class="input-group mb-3 input-group-lg">
            <span class="input-group-text">Large</span>
            <input type="text" class="form-control">
        </div>
    </div>
    <br>
    <div class="container"><!-- 多个输入框 -->
        <div class="input-group mb-3">
            <span class="input-group-text">Person</span>
            <input type="text" class="form-control" placeholder="First Name">
            <input type="text" class="form-control" placeholder="Last Name">
        </div>

        <!-- 多个文本信息 -->
        <div class="input-group mb-3">
            <span class="input-group-text">One</span>
            <span class="input-group-text">Two</span>
            <span class="input-group-text">Three</span>
            <input type="text" class="form-control">
        </div>
    </div>
    <br>
    <div class="container">
        <div class="input-group mb-3">
            <div class="input-group-text">
                <input type="checkbox">
            </div>
            <input type="text" class="form-control" placeholder="RUNOOB">
        </div>

        <div class="input-group mb-3">
            <div class="input-group-text">
                <input type="radio">
            </div>
            <input type="text" class="form-control" placeholder="GOOGLE">
        </div>
    </div>
    <br>
    <div class="container">
        <div class="input-group mb-3">
            <button class="btn btn-outline-primary" type="button">Basic Button</button>
            <input type="text" class="form-control" placeholder="Some text">
        </div>

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Search">
            <button class="btn btn-success" type="submit">Go</button>
        </div>

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Something clever..">
            <button class="btn btn-primary" type="button">OK</button>
            <button class="btn btn-danger" type="button">Cancel</button>
        </div>
    </div>
    <br>
    <div class="container">
        <div class="input-group mt-3 mb-3">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                选择网站
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="https://www.google.com">GOOGLE</a></li>
                <li><a class="dropdown-item" href="https://www.runoob.com">RUNOOB</a></li>
                <li><a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a></li>
            </ul>
            <input type="text" class="form-control" placeholder="网站地址">
        </div>
    </div>
    <br>
    <div class="container">
        <form>
            <label for="demo">这里输入您的邮箱:</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
                <span class="input-group-text">@runoob.com</span>
            </div>
        </form>
    </div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>

    <script src="./js/bootstrap.bundle.min.js"></script>
</body>

</html>